<template>
  <div class="wrapper">
    <div class="row">
      <div class="col-md-12">
        <div class="mail-box">
          <aside class="mail-nav mail-nav-bg-color">
            <header class="header"><h4>文 章</h4></header>
            <div class="mail-nav-body">
              <div class="text-center">
                <a class="btn btn-compose" href="mail_compose.html"> 分类 </a>
              </div>
              <ul class="nav nav-pills nav-stacked mail-navigation">
                <li style="cursor:pointer" v-for=" category in categorys"><a v-on:click="selectCategory(category)"> {{category.name}}</a></li>
              </ul>
              <div class="text-center">
                <a class="btn btn-compose" href="mail_compose.html"> 标签 </a>
              </div>
              <div class="tag">
                <span class="badge">5</span> <span class="badge badge-primary">10</span> <span class="badge badge-success">15</span> <span class="badge badge-info">20</span> <span class="badge badge-inverse">25</span> <span class="badge badge-warning">30</span> <span class="badge badge-important">35</span>
              </div>
            </div>
            <footer class="text-center">
              <div class="btn-group">
                <a href="javascript:;" class="btn mini btn-default"> <i class="fa fa-power-off"></i> </a>
              </div>
              <div class="btn-group">
                <a href="javascript:;" class="btn mini btn-default"> <i class="fa fa-cog"></i> </a>
              </div>
            </footer>
          </aside>
          <section class="mail-box-info">
            <header class="header">
              <div class="compose-btn pull-right"></div>
              <div class="btn-toolbar">
                <h4 class="pull-left">
                  正 文 </h4>
              </div>
            </header>
            <section class="mail-list">
              <div class="compose-mail">
                <div class="form-group">
                  <label class="">名称:</label> <input type="text" v-model="form.title" class="form-control">
                </div>
                <div class="form-group">
                  <label class="">分类:</label> <input type="text" v-model="form.category_name" class="form-control"> <input type="hidden" v-model="form.category_id" class="form-control">
                </div>
                <div class="form-group">
                  <label class="">标签:</label> <input type="text" v-model="form.tag_id" class="form-control">
                </div>
                <div class="form-group">
                  <label class="">简介</label> <input type="text" v-model="form.intro" class="form-control">
                </div>
                <div class="form-group" style="margin-bottom:5px">
                  <label class="">封面</label> <input type="hidden" v-model="form.img">
                  <!--enctype=”multipart/form-data”-->
                  <form id="uploadImg" enctype="multipart/form-data">
                    <input id="file" type="file" name="file" style="line-height: 34px;width:40%"/>
                    <button type="button" v-on:click="upload()" class="uploadButton">上传</button>
                  </form>
                </div>
                <p v-html="percentage"></p>
                <div class="form-group">
                  <div id="container" name="content" type="text/plain" style="width:100%;"></div>
                </div>
                <div class="form-status">
                  <label class="label-tag">状态</label>
                  <el-checkbox v-model="form.status" checked>发布</el-checkbox>
                </div>
                <hr>
                <div class="compose-btn">
                  <button v-on:click="editArticle()" class="btn btn-primary btn-sm"><i class="fa fa-check"></i> 保存</button>
                </div>
              </div>
            </section>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang='sass'>
  .label-tag{
    line-height:34px;
    width:10%;
    float:left;
    padding-left:10px;
    margin-bottom:0;
    background:#eaebee;
    margin-right:10px;
  }
  .form-status{
    border:1px solid #eaebee;
    display:inline-block;
    width:100%;
    margin-bottom:0;
    height:34px;
  }
  .form-status .el-checkbox{
    margin-top:0px;
    line-height:34px;
  }
  .uploadButton{
    border:none;
    display:inline-block;
    text-align:center;
    line-height:34px;
    width:10%;
    height:34px;
    background-color:#cccccc;
    cursor:pointer;
  }
  .uploadButton:hover{
    background-color:#65cea7;
  }
  .uploadLoad{
    display:none;
  }
</style>
<script>
  export default{
    data(){
      return {
        categorys: [],
        page: {
          count: 0,
          page: 1,
          size: 10,
          sizeNum: [ {
            key: 1,
            value: 1
          }, {
            key: 5,
            value: 5
          }, {
            key: 10,
            value: 10
          }, {
            key: 20,
            value: 20
          }, {
            key: 30,
            value: 30
          } ],
        },
        form: {
          id:'',
          category_id: '',
          category_name: '',
          content: '',
          id: '',
          img: '',
          intro: '',
          status: true,
          title: '',
        },
        isAction: false,
        percentage: '',
        ue: null,
        id: '',
      }
    },
    mounted: function(){
      this.id = this.$route.params.id;
      var int = /^\d*$/;
      if( !int.test( this.id ) ){
        this.$router.replace( '/' );
      }
      this.getCategory();
      this.getUser();
      this.edit();
    },
    created(){
    },
    methods: {
      open( msg, type ) {
        this.$message( {
          message: msg,
          type: type
        } );
      },
      getUser: function(){
        var _self = this;
        _self.$http.post( '/admin/article/article/get', { id: this.id } ).then( function( response ){
          if( response.data.status ){
            _self.form = response.data.data
            _self.ue.ready( function(){
              _self.ue.setContent( _self.form.content );
            } );
            _self.percentage = '<img style="width:100px"  src="' + this.form.img + '?imageView2/1/w/200/h/200">'
            console.log(_self.form.status==1?'true':'false');
            _self.form.status=_self.form.status==1?true:false;
          }else{
            _self.$router.replace( '/' );
          }
        }, function( response ){
          _self.$router.replace( '/' );
        } );
      },
      getCategory(){
        this.load.loading( true );
        this.$http.post( '/admin/article/category/gets' ).then( function( response ){
          this.load.loading( false );
          if( response.data.status ){
            this.categorys = response.data.data;
          }
        }, function( response ){
        } ).bind( this );
      },
      selectCategory( category ){
        this.form.category_name = category.name;
        this.form.category_id = category.id;
      },
      editArticle(){
        var _self = this
        _self.ue.ready( function(){
          var html = _self.ue.getContent();
          _self.form.content = html;
        } );
        if( _self.form.title == '' ){
          this.open( '标题不能为空', 'warning' )
          return;
        }
        if( _self.form.content == '' ){
          this.open( '内容不能为空', 'warning' )
          return;
        }
        if( _self.form.category_id == '' ){
          this.open( '请选择分类', 'warning' )
          return;
        }
        this.load.loading2( true, '修改文章中......' )
        this.$http.post( '/admin/article/article/edit', { data: this.form } ).then( function( response ){
          this.load.loading2( false, '' )
          if( response.data.status ){
            this.open( response.data.data, 'success' )
            this.$router.replace('/article/list');
          }else{
            this.open( response.data.data, 'warning' )
          }
        }, function( response ){
          this.load.loading2( false, '' )
          this.open( '修改失败', 'warning' )
        } ).bind( this );
      },
      upload(){
        this.isAction = true;
        var _self = this;
        _self.percentage = '上传中.......'
        $.ajax( {
          url: '/admin/upload/addimg',
          type: 'POST',
          cache: false,
          data: new FormData( $( '#uploadImg' )[ 0 ] ),
          processData: false,
          contentType: false
        } ).done( function( res ){
          if( res.status ){
            _self.form.img = res.data
            _self.percentage = '<img style="width:100px"  src="' + res.data + '?imageView2/1/w/200/h/200">'
          }else{
            _self.open( res.data, 'warning' );
          }
        } ).fail( function( res ){
          _self.open( res.data, 'warning' );
        } );
      },
      edit(){
        this.ue = UE.getEditor( 'container' );
      }
    }
  }
</script>